<template>
  <component is="a-modal" v-model:visible="visible" width="70%" :title="title" :mask-closable="false"
    :ok-loading="loading" @cancel="close" @before-ok="submit">
    <!-- 表单信息 start -->
     <div style="max-height:70vh;overflow:auto;">
    <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
        <a-form-item label="会员账号" field="user_name" style="width: 70%;">
          <a-input v-model="formData.user_name" disabled placeholder="请输入"  />
        </a-form-item>
        <a-form-item label="真实姓名" field="true_name" style="width: 70%;">
          <a-input v-model="formData.true_name" disabled placeholder="请输入" />
        </a-form-item>
        <a-form-item label="冠名" field="title_name" style="width: 70%;">
          <a-input v-model="formData.title_name" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="冠名身份证" field="helper_card" style="width: 70%;">
          <a-input v-model="formData.helper_card" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="冠名身份证图片" field="helper_card_image" style="width: 70%;">
          <sa-upload-image v-model="formData.helper_card_image" :limit="1" :multiple="false"></sa-upload-image>
        </a-form-item>
        <a-form-item label="冠名授权涵" field="helper_card_zip" style="width: 70%;">
          <sa-upload-file v-model="formData.helper_card_zip" :limit="1"></sa-upload-file>
        </a-form-item>
        <a-form-item label="登录密码" field="password" style="width: 70%;">
          <a-input-password :defaultVisibility="true" v-model="formData.password" placeholder="不修改则不用填写" />
        </a-form-item>
        <a-form-item label="状态" field="state">
          <sa-radio v-model="formData.state" :data="ENUMS.STATE"></sa-radio>
        </a-form-item>
      
        <a-form-item label="操作密码" field="admin_pay_password" style="width: 70%;">
          <a-input-password v-model="formData.admin_pay_password" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="谷歌验证码" field="google_code">
          <a-input v-model="formData.google_code" placeholder="请输入" style="width: 70%;"/>
        </a-form-item>
    </a-form>
  </div>
  </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { Message } from "@arco-design/web-vue";
import SaUploadImage from '@cps/sa-upload-image/index.vue'
import SaUploadFile from '@cps/sa-upload-file/index.vue'
import SaRadio from '@cps/sa-radio/index.vue'
import memberApi from '@/api/system/member'
import { throttle } from "lodash";
import tool from '@/utils/tool'
import ENUMS from '@/utils/enums'

const emit = defineEmits(["success"]);
// 引用定义
const formRef = ref();
const mode = ref("");
const visible = ref(false);
const loading = ref(false);
const spinLoading = ref(false)
let title = computed(() => {
  return "修改数据"
});
// 表单信息
const formData = reactive({
  user_name: '',
  true_name:'',
  title_name:'',
  helper_card:'',
  admin_pay_password: "",
  google_code:'',
  password: '',
  helper_card_image: '',
  helper_card_zip:'',
  state:1,
  id: "",
});
// 验证规则
const rules = ref({
  state: [{ required: true, message: "请选择" }],
  admin_pay_password: [{ required: true, message: "请输入" }],
  google_code: [{ required: true, message: "请输入" }],
});
const modelInfo=ref({})
// 打开弹框
const open = async (type = "add", data) => {
  console.log('data', data);
  visible.value = true;
  mode.value = type;
  formRef.value?.resetFields();
  spinLoading.value = true
  getParams(data.id)
  if (type == "add") {
  } else {
    formData.id = data.id
  }
};
const getParams=async(id)=>{
  const {data}=await memberApi.updateUserParams(id)
  setFormData(data.info)
  modelInfo.value={...data}
}
// 设置数据
const setFormData = async (data) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      formData[key] = data[key];
      if (key == 'password') { 
        formData.password=''
      }
    }
  }
};

// 数据保存
const submit = throttle(async (done) => {
    const validate = await formRef.value?.validate();
    if (!validate) {
      loading.value = true;
      try {
        let data = { ...formData };
        let result  = await memberApi.updateUser(data);;
        if (result.code === 200) {
          Message.success("操作成功");
          emit("success");
          done(true);
        }
        // 防止连续点击提交
        setTimeout(() => {
          loading.value = false;
        }, 500);
      } catch {
        loading.value = false;
      }
    }
    done(false);

}, 100);

// 关闭弹窗
const close = () => (visible.value = false);
defineExpose({ open, setFormData });
</script>
